<template>
  <div class='tab'>
    <ul>
      <li v-for="(item,index) in getTabData" :class="{'active':index==showIndex}" @click="changeTab(index)">{{item.label}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:["tabData","selectIndex","changeFun"],
  components: {},
  name: "",
  data() {
    return {
      showIndex:0
    };
  },
  computed:{
    getTabData(){
      this.showIndex=this.selectIndex
      return this.tabData||[]
    }
  },
  methods: {
    changeTab(index){
      if(!this.changeFun){console.warn("没有传入changeFun");return}
      this.changeFun(index)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.tab {
  font-size: 16px;

  ul{
    display: flex;
    margin: 15px 32px;

    li{
      width: 50%;
      flex-flow: 1;
      text-align: center;
      height: 34px;
      line-height: 32px;
      color: #FF9F20;
      border: 1px solid #FF9F20;
      border-left: none;
      box-sizing: border-box;
    }

    li:nth-child(1){
      border-left: 1px solid #FF9F20;
    }
  }

  .active{
    background-color:#FF9F20;
    color: #fff;
    position: relative;
  }
  .active::after{
    content: "";
    position: absolute;
    bottom: 0;
    border: 15px solid transparent;
    border-top: 10px solid #FF9F20;
    left: 50%;
    transform: translate(-50%,100%);
  }
}
</style>